<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- hexo injector head_begin start -->
        <link rel="preconnect" href="undefined" crossorigin="">
        <link rel="preconnect" href="https://cdn.staticfile.org" crossorigin="">
        <link rel="preconnect" href="https://cravatar.cn" crossorigin=""><!-- hexo injector head_begin end -->
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#e7ddc8" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#181c27" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 6.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicon/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicon/favicon.ico">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"hyh1370039199.gitee.io","root":"/","images":"/resources/img/","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":true,"comments":{"style":"tabs","active":"utterances","storage":true,"lazyload":false,"nav":null,"activeClass":"utterances"},"stickytabs":true,"motion":{"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.json","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/config.min.js"></script>

    <meta name="description" content="添加一些小玩意儿，美化个人博客UI😉">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo-Next主题-搭建二级分类相册">
<meta property="og:url" content="https://hyh1370039199.gitee.io/post/9/index.html">
<meta property="og:site_name" content="Blog">
<meta property="og:description" content="添加一些小玩意儿，美化个人博客UI😉">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171447201.png">
<meta property="og:image" content="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171548272.png">
<meta property="og:image" content="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171625301.png">
<meta property="og:image" content="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171627879.png">
<meta property="article:published_time" content="2022-08-16T10:00:00.000Z">
<meta property="article:modified_time" content="2022-08-17T08:29:33.671Z">
<meta property="article:author" content="hyh">
<meta property="article:tag" content="Hexo主题美化">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171447201.png">


<link rel="canonical" href="https://hyh1370039199.gitee.io/post/9/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://hyh1370039199.gitee.io/post/9/","path":"/post/9/","title":"Hexo-Next主题-搭建二级分类相册"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo-Next主题-搭建二级分类相册 | Blog</title>
  





<script async defer data-website-id="" src=""></script>



  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Blog</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-life"><a href="/life/" rel="section"><i class="fas fa-pizza-slice fa-fw"></i>生活</a></li><li class="menu-item menu-item-tech"><a href="/tech/" rel="section"><i class="fas fa-book fa-fw"></i>技术</a></li><li class="menu-item menu-item-reading"><a href="/reading/" rel="section"><i class="fas fa-book fa-fw"></i>阅读</a></li><li class="menu-item menu-item-photos"><a href="/photos/" rel="section"><i class="fas fa-camera-retro fa-fw"></i>相册</a></li><li class="menu-item menu-item-guestbook"><a href="/guestbook/" rel="section"><i class="fas fa-splotch fa-fw"></i>留言</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          目 录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%B0%E5%A2%9E%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84"><span class="nav-text">新增文件结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%B8%E5%86%8C%E9%A3%8E%E6%A0%BC"><span class="nav-text">相册风格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BB%BA%E7%AB%8B%E7%9B%B8%E5%86%8C%E7%9B%AE%E5%BD%95%E5%8F%8A%E6%A8%A1%E6%9D%BF"><span class="nav-text">建立相册目录及模板</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hyh"
      src="/resources/img/avatar.jpg">
  <p class="site-author-name" itemprop="name">hyh</p>
  <div class="site-description" itemprop="description">人生如逆旅，我亦是行人</div>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://gitee.com/hyh1370039199" title="Gitee → https:&#x2F;&#x2F;gitee.com&#x2F;hyh1370039199" rel="noopener" target="_blank"><i class="fa-brands fa-solid fa-g fa-fw"></i></a>
      </span>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hyh1370039199.gitee.io/post/9/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/resources/img/avatar.jpg">
      <meta itemprop="name" content="hyh">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Blog">
      <meta itemprop="description" content="人生如逆旅，我亦是行人">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Hexo-Next主题-搭建二级分类相册 | Blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Hexo-Next主题-搭建二级分类相册
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-08-16 18:00:00" itemprop="dateCreated datePublished" datetime="2022-08-16T18:00:00+08:00">2022-08-16</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/tech/" itemprop="url" rel="index"><span itemprop="name">技术</span></a>
        </span>
    </span>

  
    <span id="/post/9/" class="post-meta-item leancloud_visitors" data-flag-title="Hexo-Next主题-搭建二级分类相册" title="阅读次数">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span class="leancloud-visitors-count"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <p>本文搭建环境基于hexo 6.2.0、Next主题8.2.0版本。相册的图床是在腾讯云上。</p>
<h3 id="新增文件结构">新增文件结构</h3>
<p>首先要创建的文件有:</p>
<pre class="language-txt" data-language="txt"><code class="language-txt">- /blog/source/_data/galleries.yaml  存放所有图片数据json格式的
- /blog/source/photos/index.md        相册一级目录对应的index.md
- /blog/source/photos/九寨沟之旅        相册二级目录的文件夹
- /blog/source/photos/重庆之行          相册二级目录的文件夹
- /blog/themes/next/layout/photos.njk    一级相册模板
- /blog/themes/next/layout/photo.njk    二级相册模板
- /blog/source/_data/styles.styl        末尾添加相册CSS风格</code></pre>
<blockquote>
<p>腾讯云图床的相册存储结构为两级结构，一级文件夹名为galleries，二级文件夹名为相册分类命名的文件夹：九寨沟之旅，重庆之行。</p>
</blockquote>
<p><img data-src="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171447201.png" alt=""></p>
<p>galleries.yaml文件内请参照以下格式：</p>
<pre class="language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">[</span>
 <span class="token punctuation">&#123;</span><span class="token key atrule">'photos'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'1.jpg'</span><span class="token punctuation">,</span> <span class="token string">'2.jpg'</span><span class="token punctuation">,</span> <span class="token string">'3.jpg'</span><span class="token punctuation">,</span> <span class="token string">'4.jpg'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token key atrule">'cover'</span><span class="token punctuation">:</span> <span class="token string">'1.jpg'</span><span class="token punctuation">,</span> <span class="token key atrule">'description'</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token key atrule">'name'</span><span class="token punctuation">:</span> <span class="token string">'九寨沟之旅'</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#123;</span><span class="token key atrule">'photos'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'x.jpg'</span><span class="token punctuation">,</span> <span class="token string">'x.jpg'</span><span class="token punctuation">,</span> <span class="token string">'x.jpg'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token key atrule">'cover'</span><span class="token punctuation">:</span> <span class="token string">'x.jpg'</span><span class="token punctuation">,</span> <span class="token key atrule">'description'</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token key atrule">'name'</span><span class="token punctuation">:</span> <span class="token string">'xxxxxxxx'</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">]</span></code></pre>
<h3 id="相册风格">相册风格</h3>
<details>
  <summary>相册风格源码</summary>
<pre class="language-css" data-language="css"><code class="language-css"><span class="token selector">//相册风格
.gallery-wrapper</span><span class="token punctuation">&#123;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.gallery-wrapper .gallery-box</span><span class="token punctuation">&#123;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 5px <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.gallery-box</span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.gallery-wrapper .gallery-item</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.gallery-cover-box</span><span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> center center no-repeat<span class="token punctuation">;</span>
  <span class="token property">-webkit-background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.gallery-cover-box .gallery-cover-img</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.gallery-item .gallery-name</span><span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.waterfall</span> <span class="token punctuation">&#123;</span>
  <span class="token property">column-count</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
  <span class="token property">column-gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.photo-wrapper</span><span class="token punctuation">&#123;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.photo-item</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">-moz-page-break-inside</span><span class="token punctuation">:</span> avoid<span class="token punctuation">;</span>
  <span class="token property">-webkit-column-break-inside</span><span class="token punctuation">:</span> avoid<span class="token punctuation">;</span>
  <span class="token property">break-inside</span><span class="token punctuation">:</span> avoid<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 1px 3px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.22<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.photo-item img</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.photo-item .photo-name</span><span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #dddddd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.gallery-header</span><span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 35px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.95<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
</code></pre>
</details>
<h3 id="建立相册目录及模板">建立相册目录及模板</h3>
<p>创建相册目录<code>/blog/source/photos</code></p>
<pre class="language-bash" data-language="bash"><code class="language-bash">hexo new page photos</code></pre>
<p>photos文件夹内的index.md参照下面</p>
<pre class="language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> 相册
<span class="token key atrule">date</span><span class="token punctuation">:</span> xxxx<span class="token punctuation">-</span>xx<span class="token punctuation">-</span>xx xx<span class="token punctuation">:</span>xx<span class="token punctuation">:</span>xx
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"photos"</span>
<span class="token key atrule">comments</span><span class="token punctuation">:</span> <span class="token boolean important">false</span></span>
<span class="token punctuation">---</span></span></code></pre>
<p>相册二级目录<code>/blog/source/photos/九寨沟之旅</code> 文件夹内的index.md参照下面：</p>
<pre class="language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> 九寨沟之旅
<span class="token key atrule">date</span><span class="token punctuation">:</span> xxxx<span class="token punctuation">-</span>xx<span class="token punctuation">-</span>xx xx<span class="token punctuation">:</span>xx<span class="token punctuation">:</span>xx
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"photo"</span>
<span class="token key atrule">comments</span><span class="token punctuation">:</span> <span class="token boolean important">false</span></span>
<span class="token punctuation">---</span></span></code></pre>
<p>创建一级相册模板  <code>/blog/themes/next/layout/photos.njk</code></p>
<details>
  <summary>一级相册模板源码</summary>
<pre class="language-njk" data-language="njk"><code class="language-njk">&#123;% extends &#39;_layout.njk&#39; %&#125;
&#123;% import &#39;_macro&#x2F;post-collapse.njk&#39; as post_template with context %&#125;
&#123;% import &#39;_macro&#x2F;sidebar.njk&#39; as sidebar_template with context %&#125;

&#123;% block content %&#125;
    &lt;div class&#x3D;&quot;posts-expand&quot;&gt;
        &lt;div class&#x3D;&quot;gallery-header&quot; lang&#x3D;&quot;&#123;&#123; page.lang or page.language or config.language &#125;&#125;&quot;&gt;
            &#123;% include &#39;_partials&#x2F;page&#x2F;page-header.njk&#39; %&#125;
		&lt;&#x2F;div&gt;		 
		&lt;div class&#x3D;&quot;gallery-wrapper&quot;&gt;
			&#123;% for galleries in site.data.galleries %&#125;
			&lt;div class&#x3D;&quot;gallery-box&quot;&gt;		
				&lt;a href&#x3D;&quot;.&#x2F;&#123;&#123; galleries.name &#125;&#125;&quot; class&#x3D;&quot;gallery-item&quot; data-aos&#x3D;&quot;zoom-in-up&quot;&gt;
					&lt;div class&#x3D;&quot;gallery-cover-box&quot; style&#x3D;&quot;background-image: url(&#123;&#123;theme.photos_info.cos_url&#125;&#125;&#x2F;&#123;&#123; galleries.name &#125;&#125;&#x2F;&#123;&#123; galleries.cover &#125;&#125;)&quot;&gt;
					&lt;&#x2F;div&gt;
					&lt;p class&#x3D;&quot;gallery-name&quot;&gt;
						&#123;&#123; galleries.name &#125;&#125;
					&lt;&#x2F;p&gt;
				&lt;&#x2F;a&gt;
			&lt;&#x2F;div&gt;
			&#123;% endfor %&#125;
		&lt;&#x2F;div&gt;
	&lt;&#x2F;div&gt;
&#123;% endblock %&#125;

&#123;% block sidebar %&#125;
  &#123;&#123; sidebar_template.render(true) &#125;&#125;
&#123;% endblock %&#125;
</code></pre>
</details>
<p>创建二级相册模板  <code>/blog/themes/next/layout/photo.njk</code></p>
<details>
  <summary>二级相册模板源码</summary>
<pre class="language-njk" data-language="njk"><code class="language-njk">&lt;meta charset&#x3D;&#39;utf-8&#39;&gt;
&lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;&#x2F;css&#x2F;gallery.css&quot;&gt;
&lt;link rel&#x3D;&quot;stylesheet&quot; type&#x3D;&quot;text&#x2F;css&quot; href&#x3D;&quot;https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;npm&#x2F;fancybox@3.0.1&#x2F;dist&#x2F;css&#x2F;jquery.fancybox.css&quot;&gt;
&lt;link rel&#x3D;&quot;stylesheet&quot; type&#x3D;&quot;text&#x2F;css&quot; href&#x3D;&quot;https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;npm&#x2F;justifiedGallery@3.7.0&#x2F;dist&#x2F;css&#x2F;justifiedGallery.min.css&quot;&gt;

&#123;% extends &#39;_layout.njk&#39; %&#125;
&#123;% import &#39;_macro&#x2F;post-collapse.njk&#39; as post_template with context %&#125;
&#123;% import &#39;_macro&#x2F;sidebar.njk&#39; as sidebar_template with context %&#125;

&#123;% block content %&#125;
    &lt;div class&#x3D;&quot;posts-expand&quot;&gt;
        &lt;div class&#x3D;&quot;post-block&quot; lang&#x3D;&quot;&#123;&#123; page.lang or page.language or config.language &#125;&#125;&quot;&gt;
            &#123;% include &#39;_partials&#x2F;page&#x2F;page-header.njk&#39; %&#125;
			&lt;div class&#x3D;&quot;container&quot;&gt;
				&lt;div class&#x3D;&quot;photo-wrapper&quot;&gt;
					&lt;div class&#x3D;&quot;waterfall&quot; id&#x3D;&quot;mygallery&quot;&gt;
						&#123;% for i in range(site.data.galleries.length) %&#125;	
							&#123;% if site.data.galleries[i].name &#x3D;&#x3D; page.title %&#125;
								&#123;% for photo in site.data.galleries[i].photos  %&#125;
									&lt;a class&#x3D;&quot;photo-item&quot; rel&#x3D;&quot;example_group&quot; data-fancybox&#x3D;&quot;images&quot; href&#x3D;&quot;&#123;&#123;theme.photos_info.cos_url&#125;&#125;&#x2F;&#123;&#123;page.title&#125;&#125;&#x2F;&#123;&#123;photo&#125;&#125;&quot; &gt;&lt;img alt&#x3D;&quot;&#123;&#123;photo&#125;&#125;&quot; src&#x3D;&quot;&#123;&#123;theme.photos_info.cos_url&#125;&#125;&#x2F;&#123;&#123;page.title&#125;&#125;&#x2F;&#123;&#123;photo&#125;&#125;&quot; &#x2F;&gt; &lt;&#x2F;a&gt;		
								&#123;%- endfor %&#125;		
							&#123;% endif %&#125;
						&#123;%- endfor %&#125;

					&lt;&#x2F;div&gt;	
				&lt;&#x2F;div&gt;
			&lt;&#x2F;div&gt;
		&lt;&#x2F;div&gt;	
	&lt;&#x2F;div&gt;
&#123;% endblock %&#125;

&#123;% block sidebar %&#125;
  &#123;&#123; sidebar_template.render(true) &#125;&#125;
&#123;% endblock %&#125;


&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;npm&#x2F;fancybox@3.0.1&#x2F;dist&#x2F;js&#x2F;jquery.fancybox.js&quot;&gt;&lt;&#x2F;script&gt;
&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;npm&#x2F;justifiedGallery@3.7.0&#x2F;dist&#x2F;js&#x2F;jquery.justifiedGallery.min.js&quot;&gt;&lt;&#x2F;script&gt;
&lt;script&gt;

  $(&quot;a[rel&#x3D;example_group]&quot;).fancybox();
  $(&quot;#mygallery&quot;).justifiedGallery(&#123;margins: 5, rowHeight: 100&#125;);

&lt;&#x2F;script&gt;</code></pre>
</details>
<p>最后在主题配置文件 <code>/blog/themes/next/config.yaml</code>添加相册链接</p>
<pre class="language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># 腾讯COS相册链接</span>
<span class="token key atrule">photos_info</span><span class="token punctuation">:</span>
  <span class="token key atrule">cos_url</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//hyh1370039199<span class="token punctuation">-</span>1313349927.cos.ap<span class="token punctuation">-</span>chengdu.myqcloud.com/galleries</code></pre>
<div class="tabs" id=""><ul class="nav-tabs"><li class="tab active"><a href="#-1">1.打开cors设置</a></li><li class="tab"><a href="#-2">2.修改cors规则</a></li><li class="tab"><a href="#-3">3.设置访问权限</a></li></ul><div class="tab-content"><div class="tab-pane active" id="-1"><p><img data-src="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171548272.png" alt=""></p></div><div class="tab-pane" id="-2"><p>*<em>操作选择与下图一致，其他默认都填成 <em>，如下图：</em></em></p>
<p><img data-src="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171625301.png" alt=""></p></div><div class="tab-pane" id="-3"><p><strong>进入权限管理界面，将存储桶的访问权限设置为公有读私有写</strong></p>
<p><img data-src="https://hyh1370039199.oss-cn-chengdu.aliyuncs.com/img/202208171627879.png" alt=""></p></div></div></div>

    </div>

    
    
    

    <footer class="post-footer">








<div class="license">
  <div class="license-title">Hexo-Next主题-搭建二级分类相册</div>
  <div class="license-link">
    <a href="https://hyh1370039199.gitee.io/post/9/">https://hyh1370039199.gitee.io/post/9/</a>
  </div>
  <div class="license-meta">
    <div class="license-meta-item">
      <div class="license-meta-title">本文作者</div>
      <div class="license-meta-text">
          hyh
      </div>
    </div>
      <div class="license-meta-item">
        <div class="license-meta-title">发布于</div>
        <div class="license-meta-text">
          2022-08-16
        </div>
      </div>
      <div class="license-meta-item">
        <div class="license-meta-title">更新于</div>
        <div class="license-meta-text">
          2022-08-17
        </div>
      </div>
    <div class="license-meta-item">
      <div class="license-meta-title">许可协议</div>
      <div class="license-meta-text">
          <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank">CC BY-NC-SA 4.0</a>
        
      </div>
    </div>
  </div>
  <div class="license-statement">
      转载或引用本文时，请遵守上述许可协议，注明出处、不得用于商业用途！
    
  </div>
</div>

          <div class="post-tags">
              <a href="/tags/Hexo%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/" rel="tag"><i class="fa fa-tag"></i> Hexo主题美化</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/post/11/" rel="prev" title="硬件设计学习笔记 - MOS管">
                  <i class="fa fa-chevron-left"></i> 硬件设计学习笔记 - MOS管
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/post/10/" rel="next" title="芯片数据手册快捷入口">
                  芯片数据手册快捷入口 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments utterances-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner" style="width:100%">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fas fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hyh</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div><!--添加运行时间-->
<span id="sitetime"></span>
<script language=javascript>
	function siteTime(){
		window.setTimeout("siteTime()", 1000);
		var seconds = 1000;
		var minutes = seconds * 60;
		var hours = minutes * 60;
		var days = hours * 24;
		var years = days * 365;
		var today = new Date();
		var todayYear = today.getFullYear();
		var todayMonth = today.getMonth()+1;
		var todayDate = today.getDate();
		var todayHour = today.getHours();
		var todayMinute = today.getMinutes();
		var todaySecond = today.getSeconds();
		/* 
      Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
      year - 作为date对象的年份，为4位年份值
      month - 0-11之间的整数，做为date对象的月份
      day - 1-31之间的整数，做为date对象的天数
      hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
      minutes - 0-59之间的整数，做为date对象的分钟数
      seconds - 0-59之间的整数，做为date对象的秒数
      microseconds - 0-999之间的整数，做为date对象的毫秒数
     */
		var t1 = Date.UTC(2022,06,01,00,00,00); //北京时间2018-2-13 00:00:00
		var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
		var diff = t2-t1;
		var diffYears = Math.floor(diff/years);
		var diffDays = Math.floor((diff/days)-diffYears*365);
		var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
		var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
		var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
		document.getElementById("sitetime").innerHTML=" 本站已安全运行"+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
	}
	siteTime();
</script>
<!--// 添加运行时间-->
<div class="powered">  
    该主题由<a href="https://dlzhang.com" rel="noopener" target="_blank">班班</a>使用 <a href="https://theme-next.js.org" rel="noopener" target="_blank">NexT</a> 主题设计
    <br>
    <a href="/tags/">文章标签</a> · <a href="/policy/">网站政策</a>
</div>

    </div>
  </footer>

  
  <script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.org/next-theme-pjax/0.5.0/pjax.min.js" integrity="sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.org/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
  <script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js" integrity="sha256-j+yj56cdEY2CwkVtGyz18fNybFGpMGJ8JxG3GSyO2+I=" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/comments.min.js"></script><script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/utils.min.js"></script><script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/next-boot.min.js"></script><script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/pjax.min.js"></script>

  
<script src="https://cdn.staticfile.org/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/third-party/search/local-search.min.js"></script>



  <script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/third-party/fancybox.min.js"></script>


  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


  <script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"xireCeJtnAsdSwG2TIsirxon-MdYXbMMI","app_key":"3NPe30DldW7AfuxsvvdzPo7E","server_url":"https://hyh1370039199.gitee.io/","security":false}</script>
  <script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/third-party/statistics/lean-analytics.min.js"></script>


  

  <script class="next-config" data-name="enableMath" type="application/json">false</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"ams","js":{"url":"https://cdn.staticfile.org/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/third-party/math/mathjax.min.js"></script>


<script class="next-config" data-name="utterances" type="application/json">{"enable":true,"repo":"1370039199/blog-utterances","issue_term":"pathname","theme":"github-dark"}</script>
<script src="https://cdn.staticfile.org/hexo-theme-next/8.12.3/third-party/comments/utterances.min.js"></script>



<script data-pjax type="text/javascript">
  //jquery selector
  var $linkList = $(".link-list");
  if ($linkList.length != 0) {
    var j = -1;
    for	(var i = 0; i < $linkList.length; i++) {
      const listPath = $linkList[i].getAttribute('json-src');
      const iconPath = $linkList[i].getAttribute('icon-src');
      //使用 getJSON 读取 JSON 文件中的数据
      $.getJSON(listPath, function(data) {
        j++;
        //存储数据的变量 
        var li = "";
        //清空内容 
        $linkList.eq(j).empty();
        //将获取到的 json 格式数据遍历到 div 中
        $.each(data, function(infoIndex, info) {
          var labelWarn = '';
          var labelInfo = '';
          if (info['warn']) { 
            labelWarn = '<span class="label warn">' + info['warn'] + '</span>';
          }
          if (info['info']) { 
            labelInfo = '<span class="label info">' + info['info'] + '</span>';
          }
          li += '<div class="link-list-container">';
          li += '<img class="link-list-image" src="' + iconPath + info['logo'] + '">';
          li += '<p>' + info['title'] + labelInfo + labelWarn + '</p>';
          li += '<p>' + info['intro'] + '</p>';
          li += '<a href="' + info['url'] + '" rel="noopener" target="_blank" data-pjax-state=""></a>';
          li += '</div>';
        })
        //显示处理后的数据 
        $linkList.eq(j).html(li);
      })
    }
  }
</script>



<script data-pjax type="text/javascript">
  //jquery selector
  var $cultureList = $(".culture-list");
  if ($cultureList.length != 0) {
    var j = -1;
    for	(var i = 0; i < $cultureList.length; i++) {
      const listPath = $cultureList[i].getAttribute('json-src');
      const coverPath = $cultureList[i].getAttribute('cover-src');
      //使用 getJSON 读取 JSON 文件中的数据
      $.getJSON(listPath, function(data) {
        j++;
        //存储数据的变量 
        var li = "";
        //清空内容 
        $cultureList.eq(j).empty();
        //将获取到的 json 格式数据遍历到 div 中
        $.each(data, function(infoIndex, info) {
          //影评书评链接
          var title = info['title'];
          if (info['pid']) {
            title = '<a href="/post/'+ info['pid'] +'/" >' + info['title'] +'</a>';
          }

          //作者
          if (info['author']) {
            var author = '<span class="author">' + info['author'] +'</span>';
          } else {
            var author = '';
          }

          //简介
          if (info['intro']) {
            var intro = info['intro'];
          } else {
            var intro = '';
          }
          
          //分数
          if (info['score'] == null) {
            var star = '';
          } else {
            //初始化
            var colorStar = '';
            var greyStar = '';
            var int = info['score'] - info['score'] % 1; //整数部分
            //是否有小数
            var fract = 0; 
            if (info['score'] % 1 != 0) {
              fract = 1;
            }
            //整数星级
            for	(var m = 0; m < int; m++) {
              colorStar += '★';
            }
            //半星级
            if (fract != 0) {
              colorStar += '☆';
            }
            //用空缺星补齐五星
            for	(var m = 0; m < (5 - fract - int); m++) {
              greyStar += '☆';
            }
            if (info['score'] != 5) {
              star = '<span class="star-score">'+ colorStar +'<span class="grey-star">'+ greyStar +'</span></span>';
            } else {
              star = '<span class="star-score">'+ colorStar +'</span>';
            }
          }

          li += '<div class="media">';
          li += '<div class="media-cover" style="background-image:url(' + coverPath + info['cover'] + ')"></div>';
          li += '<div class="media-meta">';
          li += '<div class="media-meta-item title">' + title + '</div>';
          li += '<div class="media-meta-item">' + author + star +'</div>';
          li += '<div class="media-meta-item intro">' + intro + '</div>';
          li += '</div></div>';
        })
        
        //显示处理后的数据 
        $cultureList.eq(j).html(li);
      })
    }
  }
</script>




<script src="/resources/minigrid.min.js"></script>
<script data-pjax type="text/javascript">
  var $album = $(".album")[0];
  if($album) {
    // 相册列表 JSON 数据
    var imgDataPath = $album.getAttribute('json-src');
    // 照片存储路径
    var imgPath = $album.getAttribute('photo-src');
    // 最多显示数量
    var imgMaxNum = 50;
    // 获取窗口大小以决定图片宽度
    var windowWidth = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    if (windowWidth < 768) {
        var imageWidth = 145; // 移动端图片宽度
    } else {
        var imageWidth = 235;
    }

    // 腾讯云自定义样式 (数据万象外网流量需要付费)
    //var imgStyle = '!' + imageWidth + 'x';
    //var imgStyle = '!300x';

    // 生成相册
    var LinkDataPath = imgDataPath;
    photo = {
        page: 1,
        offset: imgMaxNum,
        init: function () {
            var that = this;
            $.getJSON(LinkDataPath, function (data) {
                that.render(that.page, data);
            });
        },
        render: function (page, data) {
            var begin = (page - 1) * this.offset;
            var end = page * this.offset;
            if (begin >= data.length) return;
            var imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
            for (var i = begin; i < end && i < data.length; i++) {
                imgNameWithPattern = data[i].split(' ')[1];
                imgName = imgNameWithPattern.split('.')[0]
                imageSize = data[i].split(' ')[0];
                imageX = imageSize.split('.')[0];
                imageY = imageSize.split('.')[1];
                li += '<div class="card" style="width:' + imageWidth + 'px" >'
                li += '<div class="album-photo" style="height:'+ imageWidth * imageY / imageX + 'px">'
                li += '<a class="fancybox fancybox.image" href="' + imgPath + imgNameWithPattern + '" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="url" data-fancybox="group" rel="group" data-caption="' + imgName + '" title="' +  imgName + '">'
                li += '<img data-src="' + imgPath + imgNameWithPattern + '" src="' + imgPath + imgNameWithPattern + '" alt="' +  imgName + '" data-loaded="true">'
                li += '</a>'
                li += '</div>'
                li += '</div>'
            }
            $(".album").append(li);
            this.minigrid();
        },

        minigrid: function() {
          var grid = new Minigrid({
              container: '.album',
              item: '.card',
              gutter: 12
          });
          grid.mount();
          $(window).resize(function() {
              grid.mount();
          });
        }
    }
    photo.init();
  }
</script>
</body>
</html>
